<template>
  <div
    class="menu-wrapper"
    v-if="platformType !== 2"
  >
    <div class="menu-type-box">
      <div
        class="menu-type"
        @click="foldMenu"
      >
        <sc-icon
          name="iconsanjiao-xia"
          :class="{ transform: !showAppMenu }"
        ></sc-icon>
        <span>移动端</span>
      </div>
      <div
        class="add-icon"
        @click="handleMenu(1)"
      >
        <sc-icon name="icontianjia-ziji"></sc-icon>
      </div>
    </div>
    <ul
      class="menu-box"
      v-show="showAppMenu"
    >
      <li
        :class="{ active: currentMenuType === 'app' && item.id === currentAppMenuId }"
        v-for="item in appPower"
        :key="item.id"
        @click="selectMenu(item)"
      >
        <div class="menu-list">
          <!-- <sc-icon name="iconkehuguanli-01"></sc-icon> -->
          {{ item.name }}
        </div>
        <div class="operate-box">
          <sc-icon
            name="iconshanchu"
            @click.native.stop="deleteMenu(item)"
          ></sc-icon>
          <sc-icon
            name="iconbianji"
            @click.native.stop="handleMenu(2, item)"
          ></sc-icon>
        </div>
      </li>
    </ul>

    <AppMenuDialog
      :title="menuTitle"
      :visible.sync="menuVisible"
      :app-info="currentAppAndMenuInfo"
      :type="menuType"
      @refresh="refreshMenuFn"
      v-if="menuVisible"
    />
  </div>
</template>

<script>
import AppMenuDialog from './AppMenuDialog.vue';

import { getAppAuthNodeList, deleteAppAuthNode } from '@/api/authority.js';

export default {
  name: 'AppMenu',
  components: {
    AppMenuDialog
  },
  inject: ['parent'],
  computed: {
    //当前菜单类型 pc / app
    currentMenuType() {
      return this.$store.getters.menuType;
    }
  },
  data() {
    return {
      serviceId: '', //应用id
      platformType: '', //应用类型
      appPower: [], //应用权限
      currentAppData: [], //当前应用数据
      currentAppMenuId: '', //app端选中菜单id
      showAppMenu: false, //显示移动端菜单
      menuTitle: '', //菜单新增/修改弹窗标题
      menuVisible: false, //菜单弹窗显示状态
      currentAppAndMenuInfo: {},
      menuType: 1, //1新增 2修改
      currentMenuInfo: {} //当前选中菜单数据
    };
  },
  watch: {
    currentAppMenuId(nv) {
      this.$store.commit('appMenu/setAppMenuId', nv);
    },
    '$store.getters.appTimestamp'() {
      this.refreshMenuFn();
    }
  },
  created() {
    let { id, type = '' } = this.$route.query;
    this.serviceId = Number(id);
    this.platformType = Number(type);

    //platformType 1:pc/app 2:pc 3:app
    if (this.platformType !== 2) {
      this.getAppAuthNodeList();
    }
  },
  methods: {
    // 获取APP所有应用权限配置
    getAppAuthNodeList() {
      getAppAuthNodeList().then(res => {
        if (res.data && res.data.length) {
          this.currentAppData = res.data.filter(item => {
            return item.id === this.serviceId;
          });

          if (this.currentAppData && this.currentAppData.length) {
            this.currentAppAndMenuInfo = this.currentAppData[0];

            if (this.currentAppData[0].auth && this.currentAppData[0].auth.length) {
              this.appPower = this.currentAppData[0].auth;
              this.$store.commit('appMenu/storageAppPower', this.appPower);
              this.showAppMenu = true;

              if (this.currentMenuType === 'app') {
                if (this.isRefresh) {
                  this.handleAppMenuFuncData(this.currentAppMenuId);
                } else {
                  this.currentAppMenuId = this.appPower[0].id;
                  this.handleAppMenuFuncData(this.appPower[0].id);
                }
              }
            } else {
              this.appPower = [];
              this.$store.commit('appMenu/storageAppPower', this.appPower);
              this.parent.tableData = [];
              this.$store.commit('appMenu/setAppMenuId', '');
            }
          } else {
            let { id, chName } = this.$route.query;
            this.currentAppAndMenuInfo = {
              id: Number(id),
              name: chName
            };
          }
        }
      });
    },
    // 刷新菜单
    refreshMenuFn() {
      this.isRefresh = true;
      this.getAppAuthNodeList();
    },
    // 折叠/展开菜单
    foldMenu() {
      this.showAppMenu = !this.showAppMenu;
    },
    // 选择应用菜单
    selectMenu(item) {
      this.$store.commit('appMenu/setMenuType', 'app');
      this.currentAppMenuId = item.id;
      this.handleAppMenuFuncData(item.id);
      this.refreshMenuFn();
    },
    // 处理APP菜单下的功能权限
    handleAppMenuFuncData(menuId) {
      if (this.$store.getters.menuType === 'app') {
        let currentMenuData = this.appPower.filter(item => {
          return item.id === menuId;
        });

        if (currentMenuData && currentMenuData.length) {
          this.tableData = currentMenuData[0].child;
          this.tableData.map(item => {
            item.type = 1;
            item.authorityName = item.auth_name;
          });

          this.parent.tableData = this.tableData;
        }
      }
    },
    // 添加/编辑菜单
    handleMenu(way, item) {
      //way 1新增 2编辑
      if (way === 1) {
        this.menuType = 1;
        this.menuTitle = '新增菜单（移动端）';
      } else {
        this.menuType = 2;
        this.currentAppAndMenuInfo = item;
        this.menuTitle = '编辑菜单（移动端）';
      }

      this.menuVisible = true;
    },
    // 删除菜单
    deleteMenu(item) {
      let title = '';
      title = `<p>确定删除移动端菜单 (<span class="sc-color-primary">${item.name}</span>) ？</p>`;
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      })
        .then(() => {
          deleteAppAuthNode({
            id: item.id
          }).then(res => {
            // 如果删除的是当前选中的菜单
            if (item.id === this.currentAppMenuId) {
              if (this.appPower.length) {
                this.currentAppMenuId = this.appPower[0].id;
                this.$store.commit('appMenu/setAppMenuId', this.currentPcMenuId);
              }
            }
            this.$toast(res.message);
            this.refreshMenuFn();
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
